<template>
  <div>
    <nav-top :title="topTitle" :show="true"></nav-top>
    <div class="mainTime">
      <ul>
        <li><span>开始日期</span><b id="dataBegin">2017-12-12</b></li>
        <li><span>结束日期</span><b id="dataEnd">2017-12-12</b></li>
      </ul>
      <div class="btn">
        <button @click="search">查询</button>
      </div>
    </div>
    <div class="mainListSeach" v-if="!show">
      <div class="mainListTop">
        <div class="income fl">
          收入:<b>{{dataList.income}}</b>
        </div>
        <div class="expenditure fl">
          支出:<b>{{dataList.consume}}</b>
        </div>
      </div>
      <ul class="mainListBottom">
        <li v-for="list in dataList.list">
          <div class="mainListTime">
            {{list.createTime}}
          </div>
          <div class="mainListContent">
            <div class="fl" style="height: 0.5rem; width: 0.8rem;"></div>
            {{list.reason}}
          </div>
          <div class="mainListNum">
            {{list.amount}}
          </div>
        </li>
      </ul>
    </div>
    <!--<div class="block">-->
    <!--<span class="demonstration">默认</span>-->
    <!--<el-date-picker-->
    <!--v-model="value3"-->
    <!--type="datetimerange"-->
    <!--range-separator="至"-->
    <!--start-placeholder="开始日期"-->
    <!--end-placeholder="结束日期">-->
    <!--</el-date-picker>-->
    <!--</div>-->
  </div>
</template>

<script>
  import navTop from '../components/navTop.vue'
  import reqData from '../ajax/ajax.js'
  export default {
    name: '',
    data () {
      return {
        dataList: {
          list: {}
        },
        show: true,
        topTitle: ''
      }
    },
    mounted: function () {
      let query = this.$route.params.title
      console.log(typeof query, query)
      if (query === '1') {
        this.topTitle = '收益查询'
      } else if (query === '2') {
        this.topTitle = '提现查询'
      }
    },
    components: {
      navTop
    },
    computed: {},
    filters: {},
    methods: {
      search () {
        reqData(this.Url + '/room/leader/change/detail', 'get', {
          pageNum: 1,
          pageSize: 20,
          startTime: '',
          endTime: ''
        }, function (data) {
          if (data.status === 0) {
            this.show = false
            this.datalist = data.data
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  //选择日期的样式
  .mainTime{
    border-bottom:0.02rem solid #e8e8e8;
    padding-top:0.44rem;
    background-color: #ffffff;
    ul{
      border-top:0.02rem solid #e8e8e8;
      li{
        padding:0 0.2rem;
        line-height: 0.86rem;
        border-bottom:0.02rem solid #e8e8e8;
        display: flex;
        display: -webkit-flex;
        b{
          flex: 1;
          text-align: center;
        }
      }
    }
    .btn{
      text-align: center;
      padding:0.19rem 0;
      button{
        height:0.61rem;
        width:4.02rem;
        background: #00b01e;
        color: #fff;
        -webkit-border-radius: 0.08rem;
        -moz-border-radius: 0.08rem;
        border-radius: 0.08rem;
        outline: none;
        border:none;

      }
    }
  }
  //搜索过后的列表样式
  .mainListSeach{
    background-color: #ffffff;
    margin-top:0.3rem;
    line-height: 0.86rem;
    .mainListTop{
      height:0.86rem;
      padding-left:0.22rem;
      border-top: 0.02rem solid #e8e8e8;
      border-bottom: 0.02rem solid #e8e8e8;
      .income{
        padding-right:0.6rem;
        line-height: 0.86rem;
      }
      b{
        color: #FFA385;
      }
    }
    .mainListBottom{
      li{
        color: #FFA385;
        border-bottom: 0.02rem solid #e8e8e8;
        position: relative;
        text-align: center;
        .mainListTime{
          position: absolute;
          top:0;
          left: 0;
          height:0.86rem;
          padding-left:0.22rem;

        }
        .mainListNum{
          position: absolute;
          top:0;
          right: 0;
          height:0.86rem;
          padding-right:0.22rem;
        }
        .mainListNumActive{
          color: #DE5C5C;
        }

      }
    }
  }
</style>
